import type { ProColumns } from "@ant-design/pro-components";
import { EditableProTable } from "@ant-design/pro-components";
import React, { useState } from "react";

type DataSourceType = {
	key: React.Key;
	value?: string;
};

const defaultValue = [
	{
		key: "$title",
		value: ""
	},
	{
		key: "$name",
		value: ""
	},
	{
		key: "$aa",
		value: ""
	},
	{
		key: "$1231",
		value: ""
	},
	{
		key: "$1231",
		value: ""
	},
	{
		key: "$1231",
		value: ""
	}
];
const VarEditorTable = () => {
	const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => defaultValue.map((item, index) => index));
	const [dataSource, setDataSource] = useState<DataSourceType[]>(() => [...defaultValue]);

	const columns: ProColumns<DataSourceType>[] = [
		{
			title: "活动名称",
			dataIndex: "key",
			width: "30%",
			formItemProps: {
				rules: [
					{
						required: true,
						whitespace: true,
						message: "此项是必填项"
					},
					{
						message: "必须包含数字",
						pattern: /[0-9]/
					},
					{
						max: 16,
						whitespace: true,
						message: "最长为 16 位"
					},
					{
						min: 6,
						whitespace: true,
						message: "最小为 6 位"
					}
				]
			}
		},
		{
			title: "描述",
			dataIndex: "value"
		}
	];

	return (
		<>
			<EditableProTable<DataSourceType>
				headerTitle={null}
				columns={columns}
				bordered
				rowKey="id"
				value={dataSource}
				onChange={setDataSource}
				recordCreatorProps={false}
				// recordCreatorProps={{
				//   newRecordType: "dataSource",
				//   record: () => ({
				//     id: Date.now(),
				//   }),
				// }}
				// toolBarRender={() => {
				//   return [
				//     <Button
				//       type="primary"
				//       key="save"
				//       onClick={() => {
				//         // dataSource 就是当前数据，可以调用 api 将其保存
				//         console.log(dataSource);
				//       }}
				//     >
				//       保存数据
				//     </Button>,
				//   ];
				// }}
				editable={{
					type: "multiple",
					editableKeys,
					actionRender: (row, config, defaultDoms) => {
						return [defaultDoms.delete];
					},
					onValuesChange: (record, recordList) => {
						setDataSource(recordList);
					},
					onChange: setEditableRowKeys
				}}
			/>
		</>
	);
};
export default VarEditorTable;
